<template>
  <div class="Strategy_Mail">
    <Header></Header>
    <div id="Strategy_Mail-pc">
      <div class="ad">
        <img src="@/assets/strategy_mail1.jpg" />
      </div>
      <div class="contents">
        <div class="index">
          <a>类型:</a>
          <a>全部</a>
          <a>股票策略</a>
          <a>基金策略</a>
        </div>
        <div class="index">
          <a>风格:</a>
          <a>不限</a>
          <a>大盘</a>
          <a>小盘</a>
          <a>重组</a>
          <a>次新</a>
          <a>行业</a>
          <a>反转</a>
          <a>价值</a>
          <a>创业</a>
          <a>成长</a>
          <a>对冲</a>
          <a>ST</a>
          <a>择时</a>
          <a>趋势</a>
        </div>
        <div class="index sort">
          <a>排序:</a>
          <a>实盘年化</a>
          <a>实盘收益</a>
          <a>一季收益</a>
          <a>近一个月收益</a>
          <a>今日收益</a>
          <a>历史最大回撤</a>
          <a>下个调仓日</a>
          <a>上架日期</a>
          <a>持仓股数</a>
          <a>策略定价</a>
        </div>
        <ul class="strategy">
          <li v-for="item in StrategyCardList" :key="item.id">
            <Strategy_Card class="Strategy_Card" :cardInfo="item"></Strategy_Card>
          </li>
        </ul>
      </div>
      <div class="rank">
        <div class="rank-list">
          <p>今日收益排行</p>
          <div class="specific-ranking">
            <p v-for="item in todayRankList" :key="item.rank">
              <span class="name">{{item.rank}}.{{item.name}}：</span>
              <span class="red-num">{{item.income}}</span>
            </p>
          </div>
        </div>
        <div class="rank-list">
          <p>{{month}}月战报</p>
          <div class="specific-ranking">
            <p v-for="item in MonthRankList" :key="item.rank">
              <span class="name">{{item.rank}}.{{item.name}}：</span>
              <span class="red-num">{{item.income}}</span>
            </p>
          </div>
        </div>
        <div class="rank-list">
          <p>流程说明</p>
          <div class="box">
            <div class="img">
              <img src="@/assets/Strategy_Mail10.jpg" />
            </div>
            <div class="big-title">订阅策略</div>
            <div class="small-title">订阅商城中的策略</div>
            <div class="lable">
              <img src="@/assets/Strategy_Mail11.jpg" />
            </div>
          </div>
          <div class="box">
            <div class="img">
              <img src="@/assets/Strategy_Mail13.jpg" />
            </div>
            <div class="big-title">绑定奇点微信</div>
            <div class="small-title">点击扫码</div>
            <div class="lable">
              <img src="@/assets/Strategy_Mail11.jpg" />
            </div>
          </div>
          <div class="box">
            <div class="img">
              <img src="@/assets/Strategy_Mail14.jpg" />
            </div>
            <div class="big-title">微信接收调仓信息</div>
            <div class="small-title">调仓日自动推送</div>
          </div>
        </div>
        <div class="rank-list">
          <p>
            常见问题
            <a href="#">更多》</a>
          </p>
          <div class="specific-ranking">
            <ul>
              <li>
                <a href="#">1、如何订阅奇点的认证策略</a>
              </li>
              <li>
                <a href="#">2、奇点策略如何收费</a>
              </li>
              <li>
                <a href="#">3、我的策略是否安全</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div id="Strategy_Mail-mobile">
      <div class="mobile-top1">
        <img src="@/assets/strategy_mail1.jpg" />
      </div>
      <div class="mobile-top2">策略组合</div>
      <div class="strategy_mail_card">
        <Strategy1></Strategy1>
        <Strategy1></Strategy1>
      </div>
      <div class="mobile-top2">推荐策略</div>
      <div class="mobile-top2">牛人推荐</div>
      <div class="strategy_mail_card">
        <Strategy1></Strategy1>
        <Strategy1></Strategy1>
        <Strategy1></Strategy1>
        <Strategy1></Strategy1>
        <Strategy1></Strategy1>
        <Strategy1></Strategy1>
        <Strategy1></Strategy1>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "@/components/Header.vue";
import Strategy1 from "@/components/cards/Strategy_Mail_Card.vue";
import Strategy_Card from "@/components/cards/Strategy_Card.vue";
//import { constants } from 'crypto';
export default {
  name: "Strategy_Mail",
  data() {
    return {
      month: "",
      StrategyCardList: [
        {
          id: 1,
          name: "行业轮动策略",
          realIncome: "20%",
          realDays: 3,
          todayIncome: "-1.2%",
          price: 800,
          date: ["2018", "2019", "2020"],
          strategyIncome: [23, 34, 12],
          baseIncome: [10, 12, 5]
        },
        {
          id: 2,
          name: "日内回转策略",
          realIncome: "-99%",
          realDays: 3,
          todayIncome: "-33.3%",
          price: 999,
          date: ["2018", "2019", "2020"],
          strategyIncome: [23, 34, 12],
          baseIncome: [10, 12, 5]
        },
        {
          id: 3,
          name: "动量择时交易",
          realIncome: "20%",
          realDays: 3,
          todayIncome: "-1.2%",
          price: 800,
          date: ["2018", "2019", "2020"],
          strategyIncome: [23, 34, 56],
          baseIncome: [10, 1.2, 15]
        }
      ],
      todayRankList: [
        {
          rank: 1,
          name: "通达信打板",
          income: "25%"
        },
        {
          rank: 2,
          name: "雪球打板",
          income: "-25%"
        }
      ],
      MonthRankList: [
        {
          rank: 1,
          name: "同花顺打板",
          income: "30%"
        },
        {
          rank: 2,
          name: "大智慧打板",
          income: "-39%"
        }
      ]
    };
  },
  created() {
    this.getCurMonth();
  },
  mounted() {},
  methods: {
    getCurMonth() {
      var month = new Date().getMonth();
      var ccList = [
        "一",
        "二",
        "三",
        "四",
        "五",
        "六",
        "七",
        "八",
        "九",
        "十",
        "十一",
        "十二"
      ];
      this.month = ccList[month];
    }
  },
  components: {
    Header,
    Strategy_Card,
    // Strategy1
  }
};
</script>

<style scoped>
@media screen and (min-width: 981px) {
  #Strategy_Mail-mobile {
    display: none;
  }
  #Strategy_Mail-pc {
    display: block;
    width: 100%;
    height: 100%;
    padding-left: 5%;
    padding-right: 5%;
    background-color: #efefef;
    float: left;
  }
  .contents {
    float: left;
    width: 78%;
    height: auto;
    padding-bottom: 2%;
    margin-right: 2%;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 1px #dfdfdf;
    background-color: #fff;
  }
  .ad {
    width: 100%;
    /* height: auto; */
    height: 420px;
    margin: 80px 0px 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 1px #dfdfdf;
    background-color: #fff;
  }
  .ad img {
    width: 100%;
  }
  .index {
    width: 100%;
    height: 30%;
    box-sizing: border-box;
    padding: 5px;
    overflow: hidden;
  }
  .index.sort {
    margin-top: 6px;
  }
  .index a {
    display: inline-block;
    padding: 5px 0px 0px 30px;
    font-family: "KaiTi";
    font-size: 18px;
    line-height: 20px;
    color: #454545;
    cursor: pointer;
  }
  .index a:hover {
    color: red;
  }
  .strategy {
    width: 100%;
    height: auto;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .strategy {
    margin: 0;
    padding: 0;
    margin-right: -6.5%;
    margin-top: 20px;
    list-style-type: none;
  }
  .strategy li {
    width: 30%;
    margin: 10px;
    cursor: pointer;
  }
  .strategy li Strategy_Card {
    height: 30%;
  }

  .rank {
    width: 20%;
    float: left;
  }
  .rank-list {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 5px 0px;
  }
  .rank-list .box {
    width: 100%;
    height: auto;
    background: white;
  }
  .rank-list .box .img {
    padding-left: 45%;
    padding-top: 10px;
    width: 30px;
    height: 40px;
  }
  .rank-list .box .img img {
    width: 30px;
    height: 20px;
  }
  .rank-list .box .big-title {
    text-align: center;
    font-size: 20px;
    line-height: 30px;
  }
  .rank-list .box .small-title {
    text-align: center;
    font-size: 13px;
    line-height: 20px;
    color: gray;
  }
  .rank-list .box .lable {
    padding: 20px 0 20px 42%;
    height: 65px;
    width: 40px;
  }
  .rank-list .box .lable img {
    width: 40px;
    height: 25px;
  }
  .rank-list p {
    font-size: 17px;
    font-weight: 600;
  }
  .rank-list p a {
    float: right;
  }
  .specific-ranking {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 1px #dfdfdf;
    background-color: #fff;
  }
  .specific-ranking ul li {
    font-size: 13px;
    line-height: 28px;
    list-style: none;
  }
  .specific-ranking p {
    width: 100%;
    overflow: hidden;
  }
  .name {
    /*display:inline-block;*/
    float: left;
    width: 60%;
    font-size: 14px;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "NSimSun";
  }
  .red-num {
    /*display:inline-block;*/
    float: right;
    width: 30%;
    color: red;
    font-size: 14px;
    line-height: 20px;
  }
}
@media screen and (max-width: 980px) {
  #Strategy_Mail-pc {
    display: none;
  }
  #Strategy_Mail-mobile {
    display: block;
    width: 100%;
    height: auto;
    padding: 15% 0% 2% 0;
    box-shadow: 0px 0px 10px 1px #dfdfdf;
  }
  .ad img {
    width: 100%;
  }
  .index {
    width: 100%;
    height: 30%;
    padding-top: 1%;
    overflow: hidden;
    background-color: white;
  }
  .mobile-top1 {
    width: 100%;
    height: auto;
    overflow: hidden;
    padding-top: 1%;
  }
  .strategy ul {
    margin: 0;
    padding: 0;
    margin-right: -6.5%;
  }
  .strategy ul li {
    width: 32%;
    height: auto;
    float: left;
    overflow: hidden;
    padding-right: 2%;
    cursor: pointer;
  }
  .strategy ul li Strategy_Card {
    height: 30%;
  }
  .rank {
    width: 20%;
    float: left;
    display: block;
  }
  .rank-list {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 5px;
  }
  .rank-list img {
    width: 100%;
    height: auto;
  }
  .mobile-top2 {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 5px;
    background-color: white;
  }
  .specific-ranking div a {
    font-size: 2px;
    line-height: 5px;
    display: inline-block;
    list-style: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .specific-ranking p {
    width: 100%;
    overflow: hidden;
  }
  .name {
    /*display:inline-block;*/
    float: left;
    width: 60%;
    font-size: 2px;
    line-height: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "NSimSun";
  }
  .strategy_mail_card {
    background-color: white;
    border-bottom: 1px solid #e6e6e6;
  }
}
</style>

